<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    canvas {
      margin: 50px auto 0;
      display: block;
      background-color: yellow;
    }
  </style>
</head>

<body>
  <canvas id="canvasId" width="400" height="400">
    此浏览器不支持canvas
  </canvas>
</body>

</html>
<script>
  const ctx = document.getElementById("canvasId");
  const gl = ctx.getContext("webgl");

  // 定义顶点着色器源码 gl_Position vec4(1.0, 0.0, 0.0, 1.0) x,y,z, w齐次坐标 （x/w,y/w,z/w）
  const VERTEX_SHADER_SOURCE = `
    attribute vec4 aPosition;
    attribute vec4 aColor;
    varying vec4 vColor;

    uniform mat4 mat;
    void main() {
      // 设置顶点位置
      gl_Position = mat * aPosition;
      vColor = aColor;
    }
  `;

  // 定义片元着色器源码
  const FRAGMENT_SHADER_SOURCE = `
    precision lowp float;
    varying vec4 vColor;
    // 主函数
    void main() {
      // 设置片元颜色为红色 
      gl_FragColor = vColor;
    }
  `;

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);
  const aPosition = gl.getAttribLocation(program, "aPosition"); // 获取attribute变量的存储位置
  const aColor = gl.getAttribLocation(program, "aColor"); // 获取attribute变量的存储位置
  const mat = gl.getUniformLocation(program, "mat"); // 获取attribute变量的存储位置

  // 创建一个Float32Array数组，用于存储顶点坐标
  const points = new Float32Array([
    0.75, 1.0, -0.6, 1.0, 0.0, 0.0,
    0.25, -1.0, -0.6, 1.0, 0.0, 0.0,
    1.0, -1.0, -0.6, 1.0, 0.0, 0.0,

    0.75, 1.0, -0.5, 0.0, 1.0, 0.0,
    0.25, -1.0, -0.5, 0.0, 1.0, 0.0,
    1.0, -1.0, -0.5, 0.0, 1.0, 0.0,

    0.75, 1.0, -0.4, 0.0, 0.0, 1.0,
    0.25, -1.0, -0.4, 0.0, 0.0, 1.0,
    1.0, -1.0, -0.4, 0.0, 0.0, 1.0,

    -0.75, 1.0, -0.6, 1.0, 0.0, 0.0,
    -0.25, -1.0, -0.6, 1.0, 0.0, 0.0,
    -1.0, -1.0, -0.6, 1.0, 0.0, 0.0,

    -0.75, 1.0, -0.5, 0.0, 1.0, 0.0,
    -0.25, -1.0, -0.5, 0.0, 1.0, 0.0,
    -1.0, -1.0, -0.5, 0.0, 1.0, 0.0,

    -0.75, 1.0, -0.4, 0.0, 0.0, 1.0,
    -0.25, -1.0, -0.4, 0.0, 0.0, 1.0,
    -1.0, -1.0, -0.4, 0.0, 0.0, 1.0,
  ]);

  const buffer = gl.createBuffer(); // 创建缓冲区对象

  const BYTES = points.BYTES_PER_ELEMENT; // 每个元素的大小

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer); // 绑定缓冲区对象

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW); // 向缓冲区对象写入数据

  gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, BYTES * 6, 0); // 将缓冲区对象分配给attribute变量
  gl.enableVertexAttribArray(aPosition); // 开启attribute变量（激活）

  gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, BYTES * 6, BYTES * 3); // 将缓冲区对象分配给attribute变量
  gl.enableVertexAttribArray(aColor); // 开启attribute变量（激活）

  // gl.vertexAttrib2f(aPosition, 0.0, 0.0); // 设置attribute变量的值
  gl.drawArrays(gl.TRIANGLES, 0, 3 * 6); // gl.POINTS绘制点，0表示从第0个点开始绘制，1表示绘制1个点

  let eyex = 0.0;
  let eyey = -0.1;
  let eyez = 0.2;

  function draw() {
    const vm = getViewMatrix(eyex, eyey, eyez, 0.0, 0.0, 0.0, 0.0, 0.6, 0.0);
    const perspective = getPerspective(150, ctx.width / ctx.height, 100, 1);
    // const matrix = getTranslateMatrix(x, x);
    gl.enable(gl.DEPTH_TEST);
    gl.uniformMatrix4fv(mat, false, mixMatrix(vm, perspective));
    gl.drawArrays(gl.TRIANGLES, 0, 3 * 6); // gl.POINTS绘制点，0表示从第0个点开始绘制，1表示绘制1个点
  }
  draw();

  document.onkeydown = function (e) {
    switch(e.keyCode) {
      case 37: eyex += 0.01; break;
      case 38: eyey += 0.01; break;
      case 39: eyex -= 0.01; break;
      case 40: eyey -= 0.01; break;
    }
    draw();
  }

</script>